<template>
	<view class="content">

    <u-modal :show="show" :title="title" :content='content' confirmText="关闭"  @confirm="confirm" ></u-modal>

		<view class="messageList" v-for="item in list" :key="item.id" @click="click(item.title,item.templateContent,item.id)">
			<view class="tops disb aic">
				<view class="disp aic">
					<view class="messPic disc jsa aic">
						<image :src="imguser+'/minis/my/message.png'" mode=""></image>
					</view>
					<view class="fw">{{item.title}}</view>
				</view>
				<view class="color9 fz12">{{getTime(item.createTime)}}</view>
			</view>
			<view class="messageContent color6">{{item.templateContent}}</view>
			<view class="see" v-if="!item.readStatus"></view>
		</view>

    <view v-if="Object.keys(list).length === 0">
    <u-empty text="暂无消息通知！" mode="list" ></u-empty>
    </view>

	</view>
</template>

<script>
import {message, messageRead} from "../../api/index.js"
  import config from '@/common/config'
	export default {
		data() {
			return {
        show:false,
        title:'',
				list:[],
        content:'',
        imguser:config.baseImgUrl
			};
		},
		onLoad() {
			this.getMessage()
		},
		methods:{
			//获取消息
			getMessage(){
				message().then(res => {
					this.list = res.data
				})
			},
			//时间戳转换
      //时间戳转换
      getTime(time){
        let data= new Date(time);
        let year = data.getFullYear();
        let month = data.getMonth() + 1;
        let day = data.getDate();
        let h = data.getHours();
        let mm = data.getMinutes();
        let s = data.getSeconds();
        month = month >= 10 ? month : "0" + month;
        day = day >= 10 ? day : "0" + day;
        h = h >= 10 ? h : "0" + h;
        mm = mm >= 10 ? mm : "0" + mm;
        s = s >= 10 ? s : "0" + s;
        return `${year}-${month}-${day} ${h}:${mm}:${s}`;
      },
			click(title,content,id){
        this.show = true
        this.title = title
				this.content = content
        messageRead(id).then(res => {})
        setTimeout(()=>{
          this.getMessage();//刷新
        },300)

			},
      confirm() {
        this.show = false
      }
		}
	}
</script>

<style lang="scss">
.content{
	padding: 24rpx;
	min-height: 100vh;
	background-color: #f7f7f7;
	.messageList{
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		position: relative;
		.tops{
			padding: 20rpx 0;
			border-bottom: 1rpx solid #ccc;
			.messPic{
				//width: 50rpx;
				//height: 50rpx;
				//margin-right: 10rpx;
				//border-radius: 50%;
				//background-color: #8fdcff;
				image{
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
		.messageContent{
			padding: 20rpx 0;
		}
		.see{
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			top: 15rpx;
			right: 20rpx;
		}
	}
}
</style>
